<template>
	<view>
		<view class="box">
			<image class="aboutus_logo" src="/static/logo-1.png"></image>
			<view class="name">闪电租车</view>
			<picker class="pkbox" @change="bindPickerChange" :value="index" :range="infoList" range-key="name">
				{{infoList[index].name}}
			</picker>

			<view class="lineBox">
				<view class="linetit">押金金额</view>
				<view class="linecont">
					<view>元</view>
					<input v-model="authorized_deposit" placeholder="1-50000" />
				</view>
			</view>
			<view class="lineBox">
				<view class="linetit">授权时间</view>
				<view class="linecont">
					<view>天</view>
					<input v-model="authorized_time" placeholder="1-30" />
				</view>
			</view>
			<view class="btn-sec" @click="APIcode()" v-if="!showcode">
				生成二维码
			</view>

			<view class="codeBox" v-if="showcode">
				<image :src="ercode" mode="widthFix" @click="previewImg" :show-menu-by-longpress="true"></image>
			</view>




		</view>
		<view class="lastlinBox">
			<view class="lastline">
				<view class="lineitem">
					<view class="tit">授权次数</view>
					<view class="num">{{lastList.authorization_time||0}}</view>
				</view>
				<view class="lineitem">
					<view class="tit">进行中授权</view>
					<view class="num">{{lastList.progress_authorization_time||0}}</view>
				</view>
			</view>
			<view class="lastline">
				<view class="lineitem">
					<view class="tit">扣款次数</view>
					<view class="num">{{lastList.deduction_number||0}}</view>
				</view>
				<view class="lineitem">
					<view class="tit">扣款金额(元)</view>
					<view class="num">{{lastList.deduction_price_total||0}}</view>
				</view>
			</view>
			<view class="lastline">
				<view class="lineitem">
					<view class="tit">待付款金额(元)</view>
					<view class="num">{{lastList.deduction_price_unpay||0}}</view>
				</view>
				<view class="lineitem">
					<view class="tit">超过30天未支付金额(元)</view>
					<view class="num">{{lastList.deduction_price_upay_30||0}}</view>
				</view>
			</view>
			<view class="btn-sec2">
				<navigator url="/pages/Freezemerchant/list">查看免押记录</navigator>
			</view>
		</view>
	</view>
</template>

<script lang="ts">
	import {
		reactive,
		toRefs,
		defineComponent,
		ref,
		// freezemer
		// watchEffect,
	} from 'vue';
	import { onShow, onPullDownRefresh } from "@dcloudio/uni-app";
	const freezemer = defineComponent({
		components: {
		},
		props: {
		},
		setup(props : any, ctx : any) {
			const data = reactive({
				authorized_deposit: '',
				showcode: false,
				ercode: '',
				lastList: "",
				authorized_time: '',
				infoList: [{
					id: '',
					name: '',
				}],
				index: 0,
				store_id: '',
			})
			// watchEffect(()=>{
			// })
			onShow(() => {
				getInfo()
				API_lastmsg()
			})
			onPullDownRefresh(() => {
				// uni.$store.dispatch('user/getinfo')
				// uni.stopPullDownRefresh();
			})
			//放大图片
			const previewImg = () => {
				const urls = [data.ercode]
				uni.$tools.previewImg(urls, 0);
			}
			const getInfo = async () => {
				const sendData = {
					// store_id: 26
				}
				const res = await uni.$request('basedata.store_list', sendData);
				data.infoList = res.data || [];
				data.store_id = data.infoList[0].id;
				console.log('freezemer', res.data)
			}
			const API_lastmsg = async () => {
				const sendData = {
					// store_id: 26
				}
				const res = await uni.$request('basedata.lastindex', sendData);
				data.lastList = res.data || [];
				console.log('freezemer', res.data)
			}
			const APIcode = async () => {
				const sendData = {
					store_id: data.store_id,
					authorized_deposit: data.authorized_deposit,
					authorized_time: data.authorized_time,
				}
				const res = await uni.$request('freezemer.qrcode', sendData);
				if (res.data.code == 0) {
					uni.showToast({
						title: res.data.msg
					})
				} else {
					data.showcode = true;
					data.ercode = res.data.qr_code_url;
				}

			}

			const bindPickerChange = (e) => {
				data.index = e.detail.value;
				data.store_id = data.infoList[e.detail.value].id;
			}
			return {
				...toRefs(data),
				bindPickerChange,
				getInfo,
				APIcode,
				previewImg,
				API_lastmsg,
			};
		}
	})
	export default freezemer;
</script>

<style lang="scss">
	page {
		background-color: #f7f7f7;
	}

	.lastlinBox {
		width: 710rpx;
		margin: 20rpx 20rpx 0;
		padding: 20rpx 20rpx 0;
		border-radius: 20rpx;
		background: #fff;
		overflow: hidden;

		.lastline {
			overflow: hidden;

			.lineitem:nth-child(odd) {
				border-right: 1px solid #ededed;
			}

			.lineitem {
				width: 50%;
				float: left;
				box-sizing: border-box;
				text-align: center;
				line-height: 100rpx;
				margin: 20rpx 0;

				.tit {
					font-size: 26rpx;
					color: #666;
				}

				.num {
					font-size: 40rpx;
					color: #000;
				}
			}
		}
	}

	.codeBox {
		width: 420rpx;
		margin: 20rpx auto 20rpx;

		image {
			width: 420rpx;
			display: block;
			margin: auto;
		}
	}

	.pkbox {
		// width: 750rpx;
		display: block;
		margin: 20rpx 0;
		background: #f2f2f2;
		line-height: 100rpx;
		height: 100rpx;
		text-align: center;
		border-radius: 10rpx;
	}

	.tipsBox {
		padding: 30rpx 0 50rpx;

		.tipstit {
			line-height: 2;
			font-size: 30rpx;
		}

		.tipsp {
			line-height: 1.5;
			color: #3E6FEF;
			font-size: 24rpx;
			line-height: 1.5;
			margin-top: 20rpx;
		}

		.tipsspan::before {
			content: '\2022';
			/* 这是一个圆点的Unicode字符 */
			display: inline-block;
			width: 10px;
			margin-right: 5rpx;
		}

		.tipsspan {
			color: #666;
			font-size: 24rpx;
			line-height: 1.5;

			text {
				color: #3E6FEF;
			}
		}
	}

	.box {
		width: 710rpx;
		margin: 60rpx 20rpx 0;
		padding: 0 20rpx 10rpx;
		border-radius: 20rpx;
		background: #fff;
		position: relative;

		.aboutus_logo {
			width: 100rpx;
			height: 100rpx;
			border-radius: 100rpx;
			margin: -50rpx;
			margin-left: 275rpx;
			display: block;
			position: absolute;

		}

		.name {
			text-align: center;
			line-height: 100rpx;
			padding-top: 60rpx;
		}

		.lineBox {
			width: 100%;
			overflow: hidden;
			border-bottom: 1px solid #ededed;

			.linetit {
				width: 50%;
				float: left;
				line-height: 100rpx;
			}

			.linecont {
				width: 50%;
				float: left;
				line-height: 100rpx;
				text-align: right;
				overflow: hidden;

				input {
					float: right;
					line-height: 100rpx;
					height: 100rpx;
					margin-right: 10rpx;
				}

				view {
					float: right;
					line-height: 100rpx;
					height: 100rpx;
				}
			}
		}
	}

	.btn-sec2 {
		width: 650rpx;
		height: 80rpx;
		background: #fff;
		box-sizing: border-box;
		border: 1px solid #3E6FEF;
		border-radius: 10rpx;
		line-height: 80rpx;
		text-align: center;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #3E6FEF;
		margin: 60rpx auto;
	}

	.btn-sec {
		width: 650rpx;
		height: 80rpx;
		background: #3E6FEF;
		border-radius: 10rpx;
		line-height: 80rpx;
		text-align: center;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
		margin: 60rpx auto;
	}
</style>